<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-结构伪类选择器</title>
    <style>
        h1 {
            text-align: center;
        }

        ul {
            width: 500px;
            margin: 0 auto;

        }

        li {

            list-style: none;
            height: 35px;
        }

        li:first-child {
            background-color: rgb(230, 249, 243);
        }

        li:last-child {
            background-color: rgb(194, 230, 241);
        }

        li:nth-child(2n) {
            background-color: rgb(238, 237, 237);
        }
    </style>
</head>

<body>
    <div>
        <h1>热门电影推荐</h1>
        <ul>
            <li><B>《星际穿越》：一部极具想象力和科学深度的科幻电影。</B></li>
            <li>《泰坦尼克号》：经典的爱情悲剧电影，感动无数人。</li>
            <li>《盗梦空间》：剧情烧脑，充满奇幻色彩。</li>
            <li>《千与千寻》：宫崎骏的经典之作，充满奇幻与激情。</li>
            <li><u>《阿凡达》：开创了电影视觉效果的新纪元。</u></li>
        </ul>
    </div>
</body>

</html>